<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="static/css/grapes.min.css">
    <style>
        body {
            background-color: #f4f8ff;
        }

        #gjs {
            border: #74FFD2;
            width: 90%;
            float: right;
        }

        .gjs {
            border: #74FFD2;
            width: 90%;
            float: right;
        }

        /* Theming */

        /* Primary color for the background */
        .gjs-one-bg {
            background-color: #f4f8ff;
        }

        /* Secondary color for the text color */
        .gjs-two-color {
            color: #000000;
        }

        /* Tertiary color for the background */
        .gjs-three-bg {
            background-color: #7f58ec;
            color: #000000;
        }

        /* Quaternary color for the text color */
        .gjs-four-color,
        .gjs-four-color-h:hover {
            color: #7f58ec;
        }

        .panel__top {
            padding: 0;
            width: 100%;
            display: flex;
            position: initial;
            justify-content: center;
            justify-content: space-between;
        }

        .panel__basic-actions {
            position: initial;
        }

        .panel__top {
            padding: 0;
            width: 100%;
            display: flex;
            position: initial;
            justify-content: center;
            justify-content: space-between;
        }

        .panel__basic-actions {
            position: initial;
        }

        .gjs-block {
            width: auto;
            height: auto;
            min-height: auto;
        }

        #blocks {
            width: 10%;
            float: left;
        }

        #all_worker {
            float: right;
            width: 90%;
        }
    </style>
</head>

<body>
    <div id="blocks"></div>
    <div id="all_worker">
        <div class="panel__top">
            <div class="panel__basic-actions"></div>
        </div>
        <div id="gjs">
            ...
        </div>
    </div>



    <script src="/static/js/grapes.min.js"></script>
    <script src="/static/js/grapesjs-touch.min.js"></script>
    <script>
        const input = editor => {
            editor.DomComponents.addType('my-input-type', {
                // Make the editor understand when to bind `my-input-type`
                isComponent: el => el.tagName === 'INPUT',

                // Model definition
                model: {
                    // Default properties
                    defaults: {
                        tagName: 'input',
                        draggable: 'form, form *', // Can be dropped only inside `form` elements
                        droppable: false, // Can't drop other elements inside
                        attributes: { // Default attributes
                            type: 'text',
                            name: 'default-name',
                            placeholder: 'Insert text here',
                        },
                        traits: [
                            'name',
                            'placeholder',
                            { type: 'checkbox', name: 'required' },
                        ],
                    }
                }
            });
        };

        const button = editor => {
            editor.DomComponents.addType('button', {
                isComponent: el => el.tagName === 'BUTTON',

                // Model definition
                model: {
                    // Default properties
                    defaults: {
                        tagName: 'button',
                        draggable: '*', // Can be dropped only inside `form` elements
                        droppable: true,

                        attributes: { // Default attributes
                            id: 'btn',
                            class: 'btn',
                            onclick: 'console.log("hello,world")',
                            style: '',
                        },
                        traits: [
                            'id',
                            'onclick',
                            'class',
                            'style',
                        ],
                    }
                }
            });
        };
        const editor = grapesjs.init({
            container: '#gjs',
            storageManager: {
                type: 'local', // Type of the storage, available: 'local' | 'remote'
                autosave: true, // Store data automatically
                autoload: true, // Autoload stored data on init
                stepsBeforeSave: 1, // If autosave enabled, indicates how many changes are necessary before store method is triggered
                options: {
                    local: { // Options for the `local` type
                        key: 'gjsProject', // The key for the local storage
                    },
                }
            },
            blockManager: {
                appendTo: '#blocks',
                blocks: [

                ],
            },
            plugins: ['grapesjs-touch', input, button],
        });
        editor.Panels.addPanel({
            id: 'panel-top',
            el: '.panel__top',
        });
        editor.Panels.addPanel({
            id: 'basic-actions',
            el: '.panel__basic-actions',
            buttons: [{
                id: 'visibility',
                active: true, // active by default
                className: 'btn-toggle-borders',
                label: '<u>B</u>',
                command: 'sw-visibility', // Built-in command
            }, {
                id: 'export',
                className: 'btn-open-export',
                //label: '导出HTML',
                label: `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="20" height="20" viewBox="0 0 20 20"><defs><clipPath id="master_svg0_188_517"><rect x="0" y="0" width="20" height="20" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_188_517)"><g><path d="M18.7143,8.738227109375L14.8572,4.881197109375L13.5717,6.166947109375L17.4285,10.023777109375L13.5717,13.880787109375L14.8572,15.166387109375L18.7143,11.309487109375L20,10.023777109375L18.7143,8.738227109375ZM5.14258,4.881197109375L1.28555,8.738227109375L0,10.023777109375L1.28555,11.309487109375L5.14258,15.166387109375L6.42812,13.880787109375L2.57129,10.023777109375L6.42812,6.166947109375L5.14258,4.881197109375ZM6.70404,18.544587109375L11.5422,1.019287109375L13.2945,1.5030371093750001L8.45639,19.028287109375L6.70404,18.544587109375Z" fill="#000000" fill-opacity="1"/></g></g></svg>`,
                command: 'export-template',
                context: 'export-template', // For grouping context of buttons from the same panel
            }, {
                id: 'show-json',
                className: 'btn-show-json',
                //label: 'JSON工程',
                label: `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="20" height="20" viewBox="0 0 20 20"><defs><clipPath id="master_svg0_188_521"><rect x="0" y="0" width="20" height="20" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_188_521)"><g><path d="M3.08915609375,9.75583C3.24575609375,9.5998,3.33363609375,9.38774,3.33331609375,9.16667L3.33331609375,5C3.33331609375,4.539759999999999,3.70641609375,4.16667,4.1666560937499995,4.16667C4.6268860937500005,4.16667,4.99998609375,3.79357,4.99998609375,3.333334C4.99998609375,2.873096,4.6268860937500005,2.500000149012,4.1666560937499995,2.5C2.78831609375,2.500000149012,1.66665209375,3.62167,1.66665209375,5L1.66665209375,8.821670000000001L1.07748509375,9.41083C0.75216629375,9.73625,0.75216629375,10.26375,1.07748509375,10.58917L1.66665209375,11.17833L1.66665209375,15C1.66665209375,16.3783,2.78831609375,17.5,4.1666560937499995,17.5C4.6268860937500005,17.5,4.99998609375,17.1269,4.99998609375,16.6667C4.99998609375,16.206400000000002,4.6268860937500005,15.8333,4.1666560937499995,15.8333C3.70641609375,15.8333,3.33331609375,15.4602,3.33331609375,15L3.33331609375,10.83333C3.33363609375,10.61226,3.24575609375,10.4002,3.08915609375,10.24417L2.84498609375,10L3.08915609375,9.75583ZM19.10329609375,9.68083C19.06129609375,9.57985,18.99989609375,9.488109999999999,18.92249609375,9.41083L18.33329609375,8.821670000000001L18.33329609375,5C18.33329609375,3.62167,17.21169609375,2.500000149012,15.83329609375,2.500000149012C15.37309609375,2.500000149012,14.99999609375,2.873096,14.99999609375,3.333334C14.99999609375,3.79357,15.37309609375,4.16667,15.83329609375,4.16667C16.29359609375,4.16667,16.666696093749998,4.539759999999999,16.666696093749998,5L16.666696093749998,9.16667C16.66649609375,9.387699999999999,16.75439609375,9.599689999999999,16.91079609375,9.75583L17.15499609375,10L16.91079609375,10.24417C16.75419609375,10.4002,16.66629609375,10.61226,16.666696093749998,10.83333L16.666696093749998,15C16.666696093749998,15.4602,16.29359609375,15.8333,15.83329609375,15.8333C15.37309609375,15.8333,14.99999609375,16.206400000000002,14.99999609375,16.6667C14.99999609375,17.1269,15.37309609375,17.5,15.83329609375,17.5C17.21169609375,17.5,18.33329609375,16.3783,18.33329609375,15L18.33329609375,11.17833L18.92249609375,10.58917C19.16079609375,10.35073,19.23209609375,9.99234,19.10329609375,9.68083ZM13.08079609375,4.40333C12.65469609375,3.98792,11.94309609375,4.13896,11.72249609375,4.69167L6.72581609375,14.6917C6.55513609375,15.1195,6.76425609375,15.6046,7.19248609375,15.7742C7.62024609375,15.9433,8.10440609375,15.7362,8.27748609375,15.31L13.27329609375,5.3100000000000005C13.39959609375,4.99691,13.32379609375,4.63855,13.08169609375,4.40333L13.08079609375,4.40333Z" fill="#000000" fill-opacity="1"/></g></g></svg>`,
                context: 'show-json',
                command(editor) {
                    editor.Modal.setTitle('Components JSON')
                        .setContent(`<textarea style="width:100%; height: 250px;">
            ${JSON.stringify(editor.getComponents())}
          </textarea>`)
                        .open();
                },
            }],
        });
        editor.BlockManager.add('h1-block', {
            label: 'H1标题',
            content: '<h1>Hello, World!</h1>',
            media: `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="20" height="20" viewBox="0 0 20 20"><defs><clipPath id="master_svg0_188_525"><rect x="0" y="0" width="20" height="20" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_188_525)"><g><path d="M5,4.16650390625L7.04833,4.16650390625L7.04833,9.38317390625L13.38583,9.38317390625L13.38583,4.16650390625L15.4342,4.16650390625L15.4342,16.66650390625L13.38583,16.66650390625L13.38583,11.134003906250001L7.04833,11.134003906250001L7.04833,16.66650390625L5,16.66650390625L5,4.16650390625Z" fill="#000000" fill-opacity="1"/></g></g></svg>`,
            category: '基础组件',
            attributes: {
                title: 'Insert h1 block'
            }
        });
        editor.BlockManager.add('Image', {
            id: 'image',
            category: '基础组件',
            label: '图像',
            media: `<svg style="width:24px;height:24px" viewBox="0 0 24 24">
            <path d="M8.5,13.5L11,16.5L14.5,12L19,18H5M21,19V5C21,3.89 20.1,3 19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19Z" />
        </svg>`,
            // Use `image` component
            content: {
                type: 'image'
            },
            // The component `image` is activatable (shows the Asset Manager).
            // We want to activate it once dropped in the canvas.
            activate: true,
        });
        editor.BlockManager.add('button', {
            label: '按钮',
            type: 'button',
            content: '<button id="button">click</button>',
            category: '基础组件',
            media: `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="20" height="20" viewBox="0 0 20 20"><defs><clipPath id="master_svg0_194_504"><rect x="0" y="0" width="20" height="20" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_194_504)"><g><path d="M7.1875,10.125C7.125,10,7.0625,9.9375,6.9375,9.8125C6.875,9.75,6.75,9.6875,6.6875,9.625C6.75,9.5625,6.8125,9.5625,6.8125,9.5C6.875,9.4375,6.875,9.375,6.9375,9.3125C6.9375,9.25,7,9.1875,7,9.0625L7,8.8125C7,8.625,6.9375,8.437501,6.875,8.250001C6.8125,8.062501,6.6875,7.937501,6.625,7.812501C6.5,7.687501,6.375,7.625001,6.25,7.5625014C6.125,7.50000119209,5.9375,7.50000119209,5.8125,7.50000119209L4.375,7.50000119209L4.375,12.4375L5.9375,12.4375C6.125,12.4375,6.3125,12.375,6.5,12.3125C6.6875,12.25,6.8125,12.125,6.9375,12C7.0625,11.875,7.1875,11.6875,7.25,11.5C7.3125,11.3125,7.375,11.125,7.375,10.875C7.375,10.75,7.375,10.5625,7.3125,10.4375C7.25,10.3125,7.25,10.1875,7.1875,10.125ZM5.3125,8.375L5.625,8.375C5.75,8.375,5.875,8.437501,5.9375,8.5C6.0625,8.5625,6.0625,8.6875,6.0625,8.875C6.0625,9.0625,6,9.1875,5.9375,9.25C5.875,9.375,5.75,9.375,5.625,9.375L5.3125,9.375L5.3125,8.375ZM6.375,11.1875C6.3125,11.25,6.3125,11.3125,6.25,11.375C6.1875,11.4375,6.125,11.4375,6.0625,11.5C6,11.5,5.9375,11.5625,5.8125,11.5625L5.3125,11.5625L5.3125,10.3125L5.8125,10.3125C6,10.3125,6.125,10.375,6.25,10.5C6.375,10.625,6.4375,10.75,6.4375,11Q6.375,11.125,6.375,11.1875ZM14.625,9.375L14.625,10.3125C14.5,10.1875,14.4375,10,14.3125,9.8125C14.1875,9.625,14.0625,9.5,13.9375,9.375L12.5,7.5L11.6875,7.5L11.6875,12.4375L12.6875,12.4375L12.6875,9.3125L13.0625,9.875C13.1875,10.0625,13.3125,10.25,13.5,10.4375L15.125,12.5625L15.625,12.5625L15.625,7.562499L14.625,7.562499L14.625,9.375Z" fill="#333333" fill-opacity="1"/></g><g><path d="M17.5,4.375L2.5,4.375C1.8125,4.375,1.25,4.9375,1.25,5.625L1.25,14.375C1.25,15.0625,1.8125,15.625,2.5,15.625L17.5,15.625C18.1875,15.625,18.75,15.0625,18.75,14.375L18.75,5.625C18.75,4.9375,18.1875,4.375,17.5,4.375ZM17.5,13.75C17.5,14.125,17.25,14.375,16.875,14.375L3.125,14.375C2.75,14.375,2.5,14.125,2.5,13.75L2.5,6.25C2.5,5.875,2.75,5.625,3.125,5.625L16.875,5.625C17.25,5.625,17.5,5.875,17.5,6.25L17.5,13.75Z" fill="#333333" fill-opacity="1"/></g><g><path d="M7.6875,8.4375L8.9375,8.4375L8.9375,12.4375L10,12.4375L10,8.4375L11.25,8.4375L11.25,7.5L7.6875,7.5L7.6875,8.4375Z" fill="#333333" fill-opacity="1"/></g></g></svg>`,
        });
        editor.BlockManager.add('flex', {
            label: '布局1',
            content: '<div class="flex"><div class="flex_left"><p>Test</p></div><div class="flex_right"><p>Test</p></div></div><style>.flex{width: 100%;min-height: 3vh;}.flex_left{width: 50%;float: left;min-height: 3vh;}.flex_right{width: 50%;float:right;min-height: 3vh;}</style>',
            category: '布局',
            attributes: {
                title: '添加按钮'
            },
            media: `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="20" height="20" viewBox="0 0 20 20"><defs><clipPath id="master_svg0_194_604"><rect x="0" y="0" width="20" height="20" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_194_604)"><g><rect x="1.7999999523162842" y="3" width="8" height="14" rx="0" fill="#FFFFFF" fill-opacity="0"/><rect x="1.9499999582767487" y="3.1500000059604645" width="7.699999988079071" height="13.699999988079071" rx="0" fill-opacity="0" stroke-opacity="1" stroke="#000000" fill="none" stroke-width="0.30000001192092896"/></g><g><rect x="10" y="3" width="8" height="14" rx="0" fill="#FFFFFF" fill-opacity="0"/><rect x="10.150000005960464" y="3.1500000059604645" width="7.699999988079071" height="13.699999988079071" rx="0" fill-opacity="0" stroke-opacity="1" stroke="#000000" fill="none" stroke-width="0.30000001192092896"/></g></g></svg>`,
        });
        editor.I18n.addMessages({
            zh: {
                styleManager: {
                    properties: {
                        // The key is the property name (or id)
                        'margin-top': '顶部',
                        'margin-right': '右侧',
                        'margin-left': '左侧',
                        'margin-bottom': '底部',
                    },
                }
            }
        });
        editor.BlockManager.add('nav', {
            label: '导航栏',
            content: `<div class="nav">
                      </div>
                      <style>
                        .nav{
                            width:100%;
                            min-height:6vh;
                            border:0 solid black;
                            border-radius:20px 20px 20px 20px;
                        }
                      </style>`,
            category: '基础组件',
        });
        editor.BlockManager.add('p', {
            label: '文本',
            content: `<p>abc</p>`,
            category: '基础组件',
            media: `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="20" height="20" viewBox="0 0 20 20"><defs><clipPath id="master_svg0_194_500"><rect x="0" y="0" width="20" height="20" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_194_500)"><g><path d="M13.5205703125,17.24220078125L6.4786103125,17.24220078125L6.4786103125,16.64280078125C6.7872103125,16.53230078125,7.1006003125,16.43570078125,7.4178303125,16.35310078125C7.7342403125,16.26960078125,8.075180312499999,16.20160078125,8.4411803125,16.14540078125L8.4411803125,3.83401078125L5.7705703125,3.83401078125L4.6525193125,6.79374078125L4.1255393125,6.79374078125C4.0832043125,6.5180007812500005,4.0481123125,6.20324078125,4.0196963125,5.85172078125C3.9912943125,5.501340781250001,3.9673334125,5.14258078125,3.9456075125,4.77547078125C3.9238816125,4.41224078125,3.9071628125,4.05127078125,3.8937965125,3.70087378125C3.8792982725,3.35047278125,3.8720703125,3.03461278125,3.8720703125,2.75830078125L16.1276703125,2.75830078125C16.1276703125,3.03461278125,16.119870312499998,3.34600278125,16.1059703125,3.6897277812500002C16.0914703125,4.03457078125,16.0736703125,4.38998078125,16.0519703125,4.75541078125C16.0302703125,5.120850781250001,16.0101703125,5.47961078125,15.9884703125,5.831670781250001C15.9672703125,6.18320078125,15.9354703125,6.50518078125,15.8925703125,6.79431078125L15.3377703125,6.79431078125L14.2291703125,3.8345807812499997L11.5797403125,3.8345807812499997L11.5797403125,16.146500781249998C11.9451803125,16.21610078125,12.2872203125,16.28460078125,12.6025303125,16.35420078125C12.9195003125,16.42280078125,13.2247803125,16.51860078125,13.5205903125,16.64390078125L13.5205703125,17.24220078125L13.5205703125,17.24220078125Z" fill="#3D3D3D" fill-opacity="1"/></g></g></svg>`,
        });

        editor.Blocks.add('input', {
            label: '输入框',
            category: '基础组件',
            type: 'my-input-type',
            content: '<form><input name=""></form>'
        });

    </script>
</body>

</html>